<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="24" :xs="24">
                <el-form
                        :model="queryParams"
                        ref="queryForm"
                        :inline="true"
                        label-width="68px"
                >
                    <el-form-item label="类别编号" prop="posCategoryNo">
                        <el-input
                                v-model="queryParams.posCategoryNo"
                                placeholder="请输入类别编号"
                                clearable
                                size="small"
                                @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="类别名称" prop="posCategoryName">
                        <el-input
                                v-model="queryParams.posCategoryName"
                                placeholder="请输入类别名称"
                                clearable
                                size="small"
                                @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                type="primary"
                                icon="el-icon-search"
                                size="mini"
                                @click="handleQuery"
                        >搜索</el-button
                        >
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                        >重置</el-button
                        >
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="3">
                        <el-button
                                type="primary"
                                icon="el-icon-plus"
                                size="small"
                                @click="handleAdd"
                        >新增pos类别</el-button
                        >
                    </el-col>
                </el-row>

                <el-table v-loading="loading" :data="typeList">
                    <el-table-column label="ID" align="center" prop="posCategoryId" width="55" />
                    <el-table-column label="类别编号" align="center" prop="posCategoryNo" />
                    <el-table-column label="类别名称" align="center" prop="posCategoryName" />
                    <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-button
                                    size="small"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="handleUpdate(scope.row)"
                            >修改</el-button
                            >
                            <el-button
                                    size="small"
                                    type="text"
                                    icon="el-icon-delete"
                                    @click="handleDelete(scope.row)"
                            >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 添加修改pos类别对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="类别编号" prop="posCategoryNo">
                    <el-input v-model="form.posCategoryNo" placeholder="请输入类别编号" />
                </el-form-item>
                <el-form-item label="类别名称" prop="posCategoryName">
                    <el-input v-model="form.posCategoryName" placeholder="请输入类别名称" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { listCategory, getCategory, addCategory, updateCategory, deleteCategory } from "@/api/category";
    export default {
        name: "PosCategory",
        data() {
            return {
                // 遮罩层
                loading: false,
                // 总条数
                total: 0,
                // pos表格数据
                typeList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    posCategoryNo: undefined,
                    posCategoryName: undefined,
                },
                // 表单
                form: {},
                rules: {
                    posCategoryNo: [
                        { required: true, message: "类别编号不能为空", trigger: "blur" },
                    ],
                    posCategoryName: [
                        { required: true, message: "类别名称不能为空", trigger: "blur" },
                    ],
                },
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询pos类别列表 */
            getList() {
                this.loading = true;
                listCategory(this.queryParams).then((response) => {
                    this.typeList = response.data;
                    this.loading = false;
                });
            },

            /** 取消按钮 */
            cancel() {
                this.open = false;
                this.resetForm();
            },

            /** 表单重置 */
            resetForm() {
                this.form = {
                    posCategoryId: undefined,
                    posCategoryNo: undefined,
                    posCategoryName: undefined,
                };
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.getList();
                this.$message.success("查询成功");
            },

            /** 重置按钮操作 */
            resetQuery() {
                this.queryParams = {
                    posCategoryNo: undefined,
                    posCategoryName: undefined,
                };
                this.getList();
            },

            /** 新增按钮操作 */
            handleAdd() {
                this.resetForm();
                this.open = true;
                this.title = "添加pos类别";
            },

            /** 修改按钮操作 */
            handleUpdate(row) {
                this.resetForm();
                getCategory(row.posCategoryId).then((response) => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改pos类别";
                });
            },

            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        if (this.title == "修改pos类别") {
                            updateCategory(this.form).then((response) => {
                                this.open = false;
                                this.title = "";
                                this.getList();
                                this.$message.success(response.data); //后端返回消息字符串
                            });
                        } else {
                            addCategory(this.form).then((response) => {
                                this.open = false;
                                this.title = "";
                                this.getList();
                                this.$message.success(response.data);
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                this.$confirm(
                    '是否确认删除名称为"' + row.posCategoryName + '"的数据项?',
                    "警告",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(function () {
                        return deleteCategory(row.posCategoryId);
                    })
                    .then(() => {
                        this.getList();
                        this.$message.success("删除成功");
                    })
                    .catch(() => {});
            },
        },
    };
</script>
